<template>
  <div class="x-verification">
    <el-input v-model="viewModel" class="x-verification_flex" placeholder="请输入验证码" :size="size"/>
    <div class="x-verification_but" @click="getCode">{{ codeText }}</div>
  </div>
</template>

<script>
export default {
  props: {
    size: {}
  },
  data() {
    return {
      viewModel: '',
      codeText: '获取验证码',
      timerClearInterval: null,
      isCode: true
    }
  },
  methods: {
    async getCode() {
			var this_ = this
			if (!this.$ala.checkPhone(this.viewModel)) {
				return this.$ala.error('手机号不正确')
			}
			if (this.isCode) {
				this.isCode = false
				await this.$api.smsVerifiyCodeGet(this.viewModel)
				var count = 60
				this_.timerClearInterval = setInterval(() => {
					count--
					if (count > 0) {
						this.codeText = `${count}秒后重新获取`
					} else {
						clearInterval(this_.timerClearInterval)
						this.isCode = true
						this.codeText = '重新获取验证码'
					}
				}, 1000)
			}
		}
  }
}
</script>

<style lang="scss">
.x-verification{
  display: flex;
  flex-direction: row;
  .x-verification_flex{
    flex: 1;
    min-width: 0;
  }
  .x-verification_but{
    font-size: 12px;
    color: #ffffff;
    background-color: #3370FF;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 5px;
    padding: 0 10px;
    cursor: pointer;
    &:hover{
      opacity: 0.8;
    }
  }
}
</style>